<template>

  <div class="soundtrack" v-if="movieSoundtrack.musicNum > 0">
    <div class="title-num">
      <div class="title">电影原声</div>
      <div class="num">
        {{ movieSoundtrack.musicNum }}首
        <van-icon name="arrow" />
      </div>
    </div>


    <div class="music-box">
      <img :src="disc" alt="disc" class="disc">
      <div class="music-info">
        <div class="music-name">{{ movieSoundtrack.musicName }}</div>
        <div class="music-star">{{ movieSoundtrack.musicStar }}</div>
      </div>

    </div>



  </div>





</template>


<script setup>
import disc from "@/assets/film-music-icon.png";
import { computed } from 'vue'

const props = defineProps({
  movieSoundtrack: {
    type: Object,
  }
});

const movieSoundtrack = computed(() => props.movieSoundtrack);

</script>

<style scoped>
.soundtrack {
  margin-top: 10px;
  background-color: #fff;
}


.title-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #333;
  padding: 10px;
}

.num {
  font-size: 13px;
  color: #666;
}


.music-box {
  padding: 0 10px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.music-info {
  padding-left: 10px;
  height: 70px;
  width: 100%;
  border-top: 0.5px solid #e8e8e8;
  border-right: 0.5px solid #e8e8e8;
  border-bottom: 0.5px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

/* .music-info:after {
  box-sizing: border-box;
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 1px;
  transform: scale(.5);
  transform-origin: top left;
} */


.music-name {
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}

.music-star {
  font-size: 13px;
  color: #999;
}

.disc {
  width: 70px;
  height: 70px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
